<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    *{
      font-size: 15px;
    }
    #app{
      width: 100%;
    }
    #toubu{
      padding-top: 10px;
    }
    toubu1{
      padding-top: 60px;

    }
  .toubuwenzi{
    margin-right: 10px;
    padding-left: 20px;
  }
    #toubu1{
      padding-top: 35px;
      margin-right: 10px;
      padding-left: 20px;
      display: inline-block;
    }
    #cha{
      float: right;
      left: -181px;
    }
    #chaa{
      float: left;
      margin-top: 35px;
      padding-bottom: 100px;
    }

    .el-row {
      margin-bottom: 20px;
    }
    .bg-purple-dark {
      /*background: #99a9bf;*/
      background-color: #e6f7ff;
      border: 1px solid #91d5ff;
    }

    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }
    .el-dropdown-link {
      cursor: pointer;
      color: #409EFF;
    }
    .el-icon-arrow-down {
      font-size: 12px;
    }
    #chouti{
      width: 800px;
      padding-top: 150px;
      position: absolute;
      margin-top: 50px;
      left: 50%;top: 15%;
      transform: translate(-50%,-50%);
    }
  </style>
</head>
<body>
<div id="app">
  <div id="toubu">
    <span class="toubuwenzi">账号:</span>
      <el-input style="width: 20%;height: 32px" v-model="haha.username" placeholder="请输入账号模糊查询"></el-input>
    <span class="toubuwenzi">性别:</span>
  <template>
    <el-select style="height: 32px; width: 20%;" v-model="haha.gender" placeholder="请选择性别">
      <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
      </el-option>
    </el-select>
  </template>
    <span class="toubuwenzi">真实姓名:</span>
    <el-input style="width: 20%;height: 32px" v-model="haha.realName" placeholder="请输入真实姓名"></el-input>
    <span class="toubuwenzi">手机号码:</span>
    <el-input style="width: 20%;height: 32px" v-model="haha.phone" placeholder="请输入手机号码"></el-input>
    <div id="toubu1">
    <span class="toubuwenzi1">用户状态:</span>
      <template>
      <el-select style="height: 32px; width: 40%;" v-model="haha.state" placeholder="请选择状态">
        <el-option
                v-for="i in dongjie"
                :key="i.values"
                :label="i.label"
                :value="i.values">
        </el-option>
      </el-select>
      </template>
      <el-row id="cha" >
        <el-button type="primary" icon="el-icon-search" @click="selectUserName()">查询</el-button>
        <el-button type="primary" icon="el-icon-refresh" @click="reset()">重置</el-button>
        <el-button type="text" icon="el-icon-arrow-up">收起</el-button>
      </el-row>

      <el-row id="chaa">
        <el-button type="primary" icon="el-icon-download">导出</el-button>
        <el-button type="primary" icon="el-icon-delete">回收站</el-button>
        <el-button type="primary" icon="el-icon-s-comment">高级查询</el-button>
      </el-row>
    </div>
    <div style="border:1px solid #409eff;background-color: rgba(64,158,255,0.1);margin:20px 10px;padding:12px 30px;color:#606266;border-radius: 5px;">
      已选择<a style="text-decoration: none;color:#409eff" href="javascript:void(0)">{{0}}</a>项
      <span style=" font-size: 15px; margin-left: 30px" >
                    <a style="text-decoration: none;color:#409eff" href="javascript:void(0)">清空</a>
            </span>
    </div>
  </div>


  <template>
    <el-table
            ref="multipleTable"
            :data="userArr"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
      <el-table-column
              type="selection"
              width="80">
      </el-table-column>
      <el-table-column
              prop="username"
              label="用户账号"
              width="300">
      </el-table-column>
      <el-table-column
              prop="unit"
              label="单位名称"
              width="300"
      >
      </el-table-column>
      <el-table-column
              prop="regionName"
              label="所属地区"
              width="300"
              show-overflow-tooltip>
      </el-table-column>
      <el-table-column
              prop="avatar"
              label="头像"
              width="300">
        <img src="shark.png" width="50px" alt="">
      </el-table-column>
      <el-table-column
              prop="phone"
              label="手机号" width="300"
              show-overflow-tooltip>
      </el-table-column>
      <el-table-column
              prop="state"
              label="状态"
              show-overflow-tooltip>
      </el-table-column>
      <el-table-column
              fixed="right"
              label="操作"
              width="120">
        <template slot-scope="scope">

            <el-dropdown>
  <span class="el-dropdown-link">
    更多<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-button type="text" @click="particulars(scope.row)">详情</el-button>
                  </el-dropdown-item>


                <el-dropdown-item>
                  <el-button type="text" @click="selectUserpassword(scope.row)">密码</el-button>
                </el-dropdown-item>


                <el-dropdown-item>
                  <el-popconfirm
                          title="确定删除吗？"

                  >
                    <el-button slot="reference">删除</el-button>
                  </el-popconfirm>
                </el-dropdown-item>


                <el-dropdown-item>冻结</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
        </template>

      </el-table-column>
    </el-table>
    <div>

    <el-drawer
            title="详情"
            :visible.sync="particulars"
            :data="selectUserParticulars"
            direction="rtl"
            size="50%">
      <hr>
      <center>
      <div id="chouti" style="width: 500px">
      <span class="toubuwenzi">用户账号:</span>
      <el-input style="width: 80%;height: 32px; margin-bottom: 25px;margin-top: 10px" v-model="selectUserParticulars.username" :disabled="true">
      </el-input>
      <span class="toubuwenzi">单位名称:</span>
      <el-input style="width: 80%;height: 32px;margin-bottom: 25px" v-model="selectUserParticulars.unit">
      </el-input>
      <span class="toubuwenzi">地区名称:</span>
      <el-input style="width: 80%;height: 32px;margin-bottom: 25px" v-model="selectUserParticulars.regionName">
      </el-input>
      <span class="toubuwenzi">角色选择:</span>
      <template>
        <el-select style="height: 32px; width: 80%;margin-bottom: 25px" v-model="value" placeholder="请选择">
          <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
          </el-option>
        </el-select>
      </template>
      <span class="toubuwenzi">手机号码:</span>
      <el-input style="width: 80%;height: 32px;margin-bottom: 25px" v-model="selectUserParticulars.phone">
      </el-input>
      <span class="toubuwenzi">角色分配:</span>
      <el-input
              style="width: 80%;height: 32px"
              placeholder="请输入内容"
              v-model="input"
              :disabled="true">
      </el-input>
      </div>
      </center>
    </el-drawer>


      <el-dialog title="重新设定密码" :visible.sync="dialogFormVisible"><hr>
        <el-form :model="form">
          <el-form-item label="用户账号" :label-width="formLabelWidth">
            <el-input v-model="form.username" autocomplete="off" :disabled="true"></el-input>
          </el-form-item>

          <el-form-item label="登录密码:" :label-width="formLabelWidth">
            <el-input v-model="password" autocomplete="off" placeholder="请输入登录密码"></el-input>
          </el-form-item>

          <el-form-item label="确认密码:" :label-width="formLabelWidth">
            <el-input v-model="form.password" autocomplete="off" placeholder="请重新输入登录密码"></el-input>
          </el-form-item>


        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">关 闭</el-button>
          <el-button type="primary" @click="updates()">确 定</el-button>
        </div>
      </el-dialog>




    </div>
    <div style="margin-top: 20px">

    </div>
  </template>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function() {
      return {
        particulars:false,
        form: {},
        password:'',
        formLabelWidth: '120px',
        dialogFormVisible:false,


        haha:{username: '',gender:"",realName:"",phone:"",state:""},
        input:'',
        table: false,
        options: [{
          value: '选项1',
          label: '请选择'
        }, {
          value: '男',
          label: '男'
        }, {
          value: '女',
          label: '女'
        }],
        value: '',
        dongjie: [{
          values: '请选择',
          label: '请选择'
        }, {
          values: '正常',
          label: '正常'
        }, {
          values: '冻结',
          label: '冻结'
        }],
        multipleSelection: [],
        userArr: [],
        selectUserParticulars:{}
      }
    },
    methods: {
      updates(){
        let IsP=/^[a-zA-Z0-9_-].{8,16}$/;
        if (!IsP.test(v.password)){
          /*4到16位(字母,数字,下划线,减号)*/
          alert("请输入合法的密码")
          return;
        }
        if (!IsP.test(v.form.password)){
          /*4到16位(字母,数字,下划线,减号)*/
          alert("请输入合法的密码")
          return;
        }
        if (v.form.password==v.password) {
          axios.post("/reportinguser/updatePassword", v.form).then(function (response) {
            if (response.data == 1) {
              alert("密码修改成功");
              v.dialogFormVisible = false;
              v.password='';
              return;
            } else {
              alert("密码修改失败")
            }
          })
        }else {
          alert("两次输入的密码不同")
        }
      },
      selectUserpassword(row){
        v.dialogFormVisible = true;
        axios.get("/reportinguser/selectUserpassword?id="+row.id).then(function (response) {
            v.form=response.data;
        })
      },
      particulars(row){
        v.table = true
        axios.get("/reportinguser/selectUserParticulars?id="+row.id).then(function (response) {
          v.selectUserParticulars=response.data;

        })
      },
      reset(){
        v.haha={}
      },
      selectUserName(){
        axios.post("/reportinguser/selectUserhaha",v.haha).then(function (response) {
            v.userArr=response.data;
            v.haha={};
        })
      },
      handleClose(done) {
        if (this.loading) {
          return;
        }
        this.$confirm('确定要提交表单吗？')
                .then(_ => {
                  this.loading = true;
                  this.timer = setTimeout(() => {
                    done();
                    // 动画关闭需要一定的时间
                    setTimeout(() => {
                      this.loading = false;
                    }, 400);
                  }, 2000);
                })
                .catch(_ => {});
      },
      cancelForm() {
        this.loading = false;
        this.dialog = false;
        clearTimeout(this.timer);
      },


      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }

    },
    created:function (){
      axios.post("/reportinguser/select").then(function (response) {
        v.userArr = response.data;
      })
    }
  })
</script>
</html>